<template>
	<view class="timetableInfo" :style="'background-image: url('+src+')'">
		<u-row gutter="15" justify="center">
			<u-col span="2">
			     <view class="demo-layout bg-purple-lighte"></view>
			</u-col>
			<u-col span="2" text-align="center" v-for="(item,index) in jcs" :key="index">
				<view class="demo-layout bg-purple-lighte">{{item}}</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期一</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in monday" :key="index" @click="showMessage('monday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期二</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in tuesday" :key="index" @click="showMessage('tuesday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期三</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in wednesday" :key="index" @click="showMessage('wednesday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期四</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in thursday" :key="index" @click="showMessage('thursday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期五</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in friday" :key="index" @click="showMessage('friday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期六</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in saturday" :key="index" @click="showMessage('saturday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-row gutter="15">
			<u-col span="2" text-align="center">
			     <view class="demo-layout bg-purple">星期日</view>
			</u-col>
			<u-col span="2" v-for="(item,index) in sunday" :key="index" @click="showMessage('sunday',index)">
								<view class="demo-layout bg-purple">
									<view class="courseName" v-if="item.courseName!=undefined">
										{{item.courseName}}
									</view>
									<view class="place" v-if="item.courseName!=undefined">
										<u-icon size="20" name="map"></u-icon>{{item.place}}
									</view>	
								</view>
			</u-col>
		</u-row>
		<u-popup v-model="show" mode="left" border-radius="5" class="popup" width="350rpx" closeable close-icon-pos="top-right">
			
					<view class="detail" v-if="CourseName!=undefined" v-show="showPopup">
						<!-- <view class="weekNow">
							第几周
						</view> -->
					<view><u-icon size="30" name="edit-pen"></u-icon><text>课程名称：{{CourseName}} </text></view>
					<view><u-icon size="30" name="map"></u-icon><text>上课地点：{{Palce}}</text> </view>
					<view><u-icon size="30" name="account"></u-icon><text>授课老师：{{Teacher}} </text></view>
					<view><u-icon size="30" name="clock"></u-icon><text>上课时间：{{JcsPopup}} </text></view>
					<view><u-icon size="30" name="tags"></u-icon><text>课程类型：{{Type}} </text></view>
					<view><u-icon size="30" name="clock"></u-icon><text>起始周：{{Start}} </text></view>
					<view><u-icon size="30" name="clock"></u-icon><text>结束周：{{End}} </text></view>
					<view><u-icon size="30" name="calendar"></u-icon><text>星期数：{{NumOfWeek}} </text></view>
					</view>
					<view class="setting" @click="goSetting">
						<u-icon size="50" name="setting"></u-icon>
						<view class="settingText">
							设置背景图片
						</view>
					</view>
		</u-popup>
	</view> 
        
</template>

<script>
	export default {
		data(){
			return{
				show:false,
				showPopup:true,
				token:uni.getStorageSync('token'),
				src:"",
				weekNow:0,
				CourseName:"",
				Palce:"",
				Teacher:"",
				JcsPopup:"",
				Type:"",
				Start:"",
				End:"",
				NumOfWeek:"",
				weekzhou:[
					"周一",
					"周二",
					"周三",
					"周四",
					"周五",
					"周六",
					"周日"
				],
				jcs:[
					"1-2",
					"3-4",
					"5-6",
					"7-8",
					"9-10",
				],
				monday:[],
					tuesday:[],
					wednesday:[],
					thursday:[],
					friday:[],
					saturday:[],
					sunday:[],
				
				
			}
			
		},
	    onLoad: function () { 
			this.getInfo()
			this.getBGI()
	    },
		methods:{
			getInfo(){
				return new Promise((resolve, reject) => {
								uni.request({
									url:"https://wesl.nekolab.tech/v1/table/get",
									header:{
										'content-type':"application/x-www-form-urlencoded"
									},
									data:{
										token:this.token
										},
									method:"POST",
									
								}).then((response) => {
				                   setTimeout(function() {
				                       uni.hideLoading();
				                     }, 200);
				                 response = response || '';
				                 let [error, res, reason] = response;
				                 resolve(res.data);
								 console.log("res.data.data.monday")
								 this.monday=res.data.data.monday;
								 this.tuesday=res.data.data.tuesday;
								 this.wednesday=res.data.data.wednesday;
								 this.thursday=res.data.data.thursday;
								 this.friday=res.data.data.friday;
								 this.saturday=res.data.data.saturday;
								 this.sunday=res.data.data.sunday;
				                  }).catch((error) => {
				                  error = error || '';
				                  let [err, res, reason] = error;
				                   reject(err)
				                     })
				                });
			},
			showMessage(week,num){
				this.show=true;
				var index=String(num)
				if(week=="monday"){
					this.CourseName=this.monday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.monday[index].place
					this.Teacher=this.monday[index].teacher
					this.JcsPopup=this.monday[index].jcs
					this.Type=this.monday[index].type
					this.Start=this.monday[index].start
					this.End=this.monday[index].end
					this.NumOfWeek=this.monday[index].numOfWeek
				}
				if(week=="tuesday"){
					this.CourseName=this.tuesday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.tuesday[index].place
					this.Teacher=this.tuesday[index].teacher
					this.JcsPopup=this.tuesday[index].jcs
					this.Type=this.tuesday[index].type
					this.Start=this.tuesday[index].start
					this.End=this.tuesday[index].end
					this.NumOfWeek=this.tuesday[index].numOfWeek
				}
				if(week=="wednesday"){
					this.CourseName=this.wednesday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.wednesday[index].place
					this.Teacher=this.wednesday[index].teacher
					this.JcsPopup=this.wednesday[index].jcs
					this.Type=this.wednesday[index].type
					this.Start=this.wednesday[index].start
					this.End=this.wednesday[index].end
					this.NumOfWeek=this.wednesday[index].numOfWeek
				}
				if(week=="thursday"){
					this.CourseName=this.thursday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.thursday[index].place
					this.Teacher=this.thursday[index].teacher
					this.JcsPopup=this.thursday[index].jcs
					this.Type=this.thursday[index].type
					this.Start=this.thursday[index].start
					this.End=this.thursday[index].end
					this.NumOfWeek=this.thursday[index].numOfWeek
				}
				if(week=="friday"){
					this.CourseName=this.friday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.friday[index].place
					this.Teacher=this.frifriday[index].teacher
					this.JcsPopup=this.friday[index].jcs
					this.Type=this.friday[index].type
					this.Start=this.friday[index].start
					this.End=this.friday[index].end
					this.NumOfWeek=this.friday[index].numOfWeek
				}
				if(week=="saturday"){
					this.CourseName=this.saturday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.saturday[index].place
					this.Teacher=this.saturday[index].teacher
					this.JcsPopup=this.saturday[index].jcs
					this.Type=this.saturday[index].type
					this.Start=this.saturday[index].start
					this.End=this.saturday[index].end
					this.NumOfWeek=this.saturday[index].numOfWeek
				}
				if(week=="sunday"){
					this.CourseName=this.sunday[index].courseName
					if(this.CourseName==undefined){
						this.showPopup=false
					}
					this.Palce=this.sunday[index].place
					this.Teacher=this.sunday[index].teacher
					this.JcsPopup=this.sunday[index].jcs
					this.Type=this.sunday[index].type
					this.Start=this.sunday[index].start
					this.End=this.sunday[index].end
					this.NumOfWeek=this.sunday[index].numOfWeek
				}
				this.getWeekNow()
			},
			getBGI(token){
				uni.request({
					url: 'https://wesl.nekolab.tech/v1/table/getpic',
					method: 'POST',
					header:{
						'content-type':"application/x-www-form-urlencoded"
					},
					data:{
						"token":this.token
					},
					success: (res) => {
						console.log(res)
						var srcNow=String(res.data.data.src)
						this.src="https://wesl.nekolab.tech/"+srcNow;
					}
				})
			},
			goSetting(token){
				var that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						that.src = res.tempFilePaths[0]
						console.log(res.tempFilePaths[0]);
						uni.uploadFile({
							url: 'https://wesl.nekolab.tech/v1/table/pic',
							filePath: res.tempFilePaths[0],
							//   header: {
							//           token: this.token
							//         },
							// 		  formData: {
							// 		          'content-type':"application/x-www-form-urlencoded"  //判断是正面还是反面
							// 		        },
							// name: 'src',
							success: (uploadFileRes) => {
								that.src = JSON.parse(uploadFileRes.data).data.filePath
								console.log(JSON.parse(uploadFileRes.data).data.filePath);
							}
						});
					}
				});
			},
		
		}
	}
</script>

<style lang="scss">
	.timetableInfo{
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: center;
	}
	.weekNow{
		font-weight: 900;
		color: black;
		// text-align: center;
		background-color: white;
	}
	.wrap {
			padding: 24rpx;
		}
		.u-row {
			margin-top: 10rpx;
		}
		.demo-layout {
			height: 80rpx;
			border-radius: 10rpx;
		}
		.bg-purple{
			background-color:  rgba($color: #FFFFFF, $alpha: 0.7);
			// background-color: #19BE6B;
			height: 200rpx;
			.courseName{
				font-size: 25rpx;
				text-align: left;
			}
			.place{
				font-size: 20rpx;
				margin-top: 10rpx;
				}
		}
	
		.bg-purple-lighte{
			background-color:  rgba($color: #FFFFFF, $alpha: 0.7);
			height: 45rpx;
			margin-top: 0;
		}
		.detail{
				margin-top: 60%;
				margin-left: 15rpx;
				margin-right: 15rpx;
				view{
					margin-top: 15rpx;
					text{
						border-bottom: 1px solid $u-type-info;
						margin-left: 10rpx;
					}
				}
			}
			.setting{
				display: flex;
				align-items: center;
				margin-top: 60%;
				justify-content: center;
				margin-right: 30rpx;
				margin-left: 30rpx;
				height: 60rpx;
				background-color: $u-type-info-light;
				box-shadow: 1px 1px $u-type-info;
				
				.settingText{
					margin-left: 10rpx;
				}
				}
				.setting:hover{
					background-color: $u-type-info;
					color: white;
				}
</style>
